<template>
	<view>
		<!--pages/home/home.wxml-->
		<view class="home_bar" :style="{height: statusBarHeight+'px'}"></view>
		<!--顶部-->
		<view class="home_top">
			<view class="title">{{$t('welcome')}}</view>
			<!--搜索-->
			<view class="search_con" @click="funHref('/pages/product/search')">
				<i class="iconfont icon-sousuo"></i><text>{{$t('search_alert')}}</text>
			</view>
			<!--热门搜索-->
			<view class="hot_con">
				<view class="con">
					<text v-for="item in list_hot"
						@click="funHref('/pages/product/search?keyword='+item.ch_title)">{{item.ch_title}}</text>
				</view>
			</view>
			<swiper class="banner_con" style="width: 100%;" :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration">
				<block v-for="item in list_adv">
					<swiper-item>
						<image mode="widthFix" :src="item.adv_img"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="nav_con">
			<view v-for="item in list_dh">
				<image :src="item.nav_img" />
				<text>{{item.nav_title}}</text>
			</view>
		</view>
		<view class="home_tags">
			<view :class="state==5?'con active':'con'" @click="funProduct(5)">
				<text>{{$t('recommend')}}</text>
				<label>{{$t('hot_new')}}</label>
			</view>
			<view :class="state==2?'con active':'con'" @click="funProduct(2)">
				<text>{{$t('new_product')}}</text>
				<label>{{$t('hot_new')}}</label>
			</view>
			<view :class="state==3?'con active':'con'" @click="funProduct(3)">
				<text>{{$t('hot_sales')}}</text>
				<label>{{$t('hot_new')}}</label>
			</view>
			<view :class="state==4?'con active':'con'" @click="funProduct(4)">
				<text>{{$t('hot_product')}}</text>
				<label>{{$t('hot_new')}}</label>
			</view>
		</view>
		<view class="product_con">
			<view class="con" v-for="item in list" @click="funHref('/pages/product/detail?pro_id='+item.pro_id)">
				<image :src="item.pro_imgs" mode="widthFix"></image>
				<view class="imp">
					<text>{{item.pro_title}}</text>
					<view class="price">
						￥{{item.pro_price.toFixed(2)}}<i>￥{{item.pro_marketPrice.toFixed(2)}}</i></view>
				</view>
			</view>
		</view>
		<!--加载更多-->
		<view class="load_more" @click="funLoadMore">
			{{$t('load_more')}}
		</view>
		<!--刷新-->
		<view class='loadind_con' v-if="isLoading">
			<view class="loading">
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
			</view>
		</view>
		<!--客服按钮-->
		<view class="kefu_btn" @click="funHref('/pages/chatroom/chatroom')">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons">&#xe626;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text gui-icons">{{$t('give_service')}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, //状态栏高度
				background: ['/static/img/banner1.jpg', '/static/img/banner2.jpg', '/static/img/banner.jpg'],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				list_adv: [], //滚动广告
				list_dh: [], //首页导航
				list_hot: [], //热门搜索
				list: [], //列表值
				index: 1, //页码
				isLoading: true, //是否正在加载
				state: 5, //状态 5热门推荐 2首发新品 3热销精品 4关注热品
			}
		},
		onReady() {
			uni.setTabBarItem({
				index: 0,
				text: this.$t('home')
			});
			uni.setTabBarItem({
				index: 1,
				text: this.$t('type')
			});
			uni.setTabBarItem({
				index: 2,
				text: this.$t('cart')
			});
			uni.setTabBarItem({
				index: 3,
				text: this.$t('member')
			});
		},
		onLoad(options) {
			var _this = this;
			
			//获取状态栏高度
			uni.getSystemInfo({
				success: (result) => {
					_this.statusBarHeight = result.statusBarHeight;
				},
			});

			//模拟广告图
			_this.list_adv.push({
				adv_img: '/static/img/banner1.png'
			});
			_this.list_adv.push({
				adv_img: '/static/img/banner2.jpg'
			});
			_this.list_adv.push({
				adv_img: '/static/img/banner.jpg'
			});

			//获取首页导航
			_this.fun_request("/Api/Navigation/GetList", {
				ch_id: 7
			}, function(res) {
				_this.list_dh = res.data;
			});

			//获取热门搜索
			_this.fun_request("/Api/Channel/GetList", {
				ch_kindId: 2
			}, function(res) {
				_this.list_hot = res.data;
			});

			//加载内容
			_this.funProduct(5);
		},
		methods: {
			//获取产品
			funProduct: function(state) {
				var _this = this;
				_this.state = state;
				_this.isLoading = true;

				var _param = {
					index: _this.index,
					size: 10,
					count: 10,
					state: _this.state
				};

				_this.fun_request("/Api/Product/GetPageList", _param, function(res) {
					var _list = res.data;
					_this.fun_map(_list, function(i, item) {
						if (item.pro_imgs) {
							item.pro_imgs = item.pro_imgs.split(',')[0].replace('/Upload',
								'/upload/300');
						}

						// var _pro_labels = item.pro_labels.substring(1, item.pro_labels.length);
						// _pro_labels = _pro_labels.substring(0, _pro_labels.length - 1);
						// item.pro_labels = _pro_labels.split(',');
					});
					_this.list = _this.list.concat(_list);
					//加载完成
					_this.isLoading = false;
				});
			},
			//加载更多
			funLoadMore: function() {
				var _this = this;

				_this.index = _this.index + 1;
				_this.funProduct(_this.state);
			},
			//跳转
			funHref: function(url) {
				this.fun_navigateTo(url);
			},
		}
	}
</script>

<style lang="scss">
	/* pages/home/home.wxss */
	page {
		background-color: #F7F7F7;
		padding-bottom: 30rpx;
	}

	.hot_con {
		width: 100%;

		.con text {
			background: linear-gradient(to right, #92C7FF, #79BBFE);
			color: #fff;
		}
	}

	.home_bar {
		background-color: #FFACAC;
	}

	.home_top {
		background-color: #F85F69;
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFACAC), to(#F85F69));
		width: 100%;
		height: 405rpx;
		padding: 0 3%;
		padding-top: 25rpx;

		.title {
			font-size: 34rpx;
			color: #fff;
		}
	}

	.home_tags {
		display: block;
		width: 100%;
		margin: 20rpx 0 20rpx;
		overflow: hidden;

		.con {
			float: left;
			width: 25%;
			text-align: center;

			text {
				display: block;
				font-size: 32rpx;
				color: #333;
				margin-bottom: 10rpx;
				height: 70rpx;
				overflow: hidden;
			}

			label {
				color: #999;
				border-radius: 30rpx;
				padding: 5rpx 20rpx;
				font-size: 24rpx;
			}
		}

		.con.active text {
			color: #F85F69;
		}

		.con.active label {
			background-color: #F85F69;
			color: #fff;
		}
	}

	.search_con {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: 35rpx auto 0;
		overflow: hidden;

		text {
			flex: 1;
		}
	}

	.nav_con {
		width: 100%;
		margin-top: 230rpx;
		overflow: hidden;
		min-height: 150rpx;

		view {
			float: left;
			width: 20%;
			text-align: center;
			margin-bottom: 20rpx;

			image {
				display: block;
				margin: 0 auto;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			text {
				display: block;
				font-size: 28rpx;
				color: #666;
				margin-top: 10rpx;
			}
		}
	}

</style>